<template>
  <!-- 番茄钟组件 -->
  <div class="pomodoro-timer" :class="timerSizeClass">
    <!-- 最小化状态 -->
    <div v-if="timerSize === 'minimized'" class="timer-minimized" @click="setTimerSize('normal')">
      <div class="mini-timer-content">
        <div class="mini-icon">
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none">
            <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"/>
            <polyline points="12,6 12,12 16,14" stroke="currentColor" stroke-width="2"/>
          </svg>
        </div>
        <div class="mini-time">{{ formattedTime }}</div>
        <button class="mini-play-btn" @click.stop="toggleTimer">
          <svg v-if="!isRunning" width="12" height="12" viewBox="0 0 24 24" fill="none">
            <polygon points="5,3 19,12 5,21" fill="currentColor"/>
          </svg>
          <svg v-else width="12" height="12" viewBox="0 0 24 24" fill="none">
            <rect x="6" y="4" width="4" height="16" fill="currentColor"/>
            <rect x="14" y="4" width="4" height="16" fill="currentColor"/>
          </svg>
        </button>
      </div>
      
      <!-- 当前任务信息（最小化时） -->
      <div v-if="currentTask && timerMode === 'task'" class="mini-task-info">
        <div class="task-title">{{ currentTask.title }}</div>
        <button class="stop-task-btn" @click.stop="stopCurrentTask">
          停止
        </button>
      </div>
    </div>
    
    <!-- 正常和最大化状态 -->
    <div v-else class="timer-container" :class="timerModeClass">
      <!-- 控制按钮 -->
      <div class="timer-controls">
        <div class="control-left">
          <button class="control-btn" @click="setTimerSize('minimized')" title="最小化">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none">
              <path d="M6 12h12" stroke="currentColor" stroke-width="2"/>
            </svg>
          </button>
        </div>
        
        <div class="timer-title">
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
            <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"/>
            <polyline points="12,6 12,12 16,14" stroke="currentColor" stroke-width="2"/>
          </svg>
          <span> {{ timerMode === 'task' ? '任务计时' : '自由计时' }}</span>
        </div>
        
        <div class="control-right">
          <button 
            class="control-btn" 
            @click="setTimerSize(timerSize === 'maximized' ? 'normal' : 'maximized')" 
            :title="timerSize === 'maximized' ? '还原' : '最大化'"
          >
            <svg v-if="timerSize !== 'maximized'" width="16" height="16" viewBox="0 0 24 24" fill="none">
              <path d="M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3" stroke="currentColor" stroke-width="2"/>
            </svg>
            <svg v-else width="16" height="16" viewBox="0 0 24 24" fill="none">
              <path d="M8 3v3a2 2 0 0 1-2 2H3m18 0h-3a2 2 0 0 1-2-2V3m0 18v-3a2 2 0 0 1 2-2h3M3 16h3a2 2 0 0 1 2 2v3" stroke="currentColor" stroke-width="2"/>
            </svg>
          </button>
        </div>
      </div>
      
      <!-- 预设时间按钮 -->
      <div class="preset-buttons">
        <button 
          v-for="preset in presetTimes" 
          :key="preset.value"
          class="preset-btn"
          :class="{ active: selectedPreset === preset.value && !debugMode }"
          @click="setPresetTime(preset.value)"
          :disabled="debugMode"
        >
          {{ preset.label }}
        </button>
      </div>
      
      <!-- 调试模式控制 -->
      <!-- <div class="debug-controls">
        <div class="debug-toggle">
          <label class="debug-label">
            <input 
              type="checkbox" 
              v-model="debugMode" 
              @change="onDebugModeChange"
            />
            <span class="debug-text">调试模式</span>
            <span class="debug-info">({{ debugTime }}秒倒计时)</span>
          </label>
        </div>
        <div v-if="debugMode" class="debug-time-control">
          <label>调试时长：</label>
          <input 
            type="range" 
            min="3" 
            max="30" 
            v-model="debugTime" 
            @input="updateDebugTime"
            class="debug-slider"
          />
          <span class="debug-value">{{ debugTime }}秒</span>
        </div>
      </div> -->
      
      <!-- 计时器显示 -->
      <div class="timer-display">
        <div class="time-text">{{ formattedTime }}</div>
        <button class="play-btn" @click="toggleTimer" :class="{ playing: isRunning }">
          <svg v-if="!isRunning" width="24" height="24" viewBox="0 0 24 24" fill="none">
            <polygon points="5,3 19,12 5,21" fill="currentColor"/>
          </svg>
          <svg v-else width="24" height="24" viewBox="0 0 24 24" fill="none">
            <rect x="6" y="4" width="4" height="16" fill="currentColor"/>
            <rect x="14" y="4" width="4" height="16" fill="currentColor"/>
          </svg>
        </button>
      </div>
      
      <!-- 当前任务信息 -->
      <div v-if="currentTask && timerMode === 'task'" class="current-task">
        <div class="task-header">
          <span class="task-label">当前任务</span>
        </div>
        <div class="task-content">
          <div class="task-title">{{ currentTask.title }}</div>
          <button class="stop-task-btn" @click="stopCurrentTask">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none">
              <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"/>
              <path d="M15 9l-6 6M9 9l6 6" stroke="currentColor" stroke-width="2"/>
            </svg>
            停止
          </button>
        </div>
      </div>
      
      <!-- 进度条 -->
      <div class="progress-bar">
        <div class="progress-fill" :style="{ width: progressPercentage + '%' }"></div>
      </div>
      
      <!-- 白噪音控制（最大化时显示） -->
      <div v-if="timerSize === 'maximized'" class="white-noise-section">
        <div class="noise-header">
          <div class="section-title">白噪音</div>
          <div class="noise-global-controls">
            <label class="noise-control-item">
              <span class="control-label">总开关</span>
              <button 
                class="noise-master-toggle" 
                :class="{ active: masterNoiseEnabled }"
                @click="toggleMasterNoise"
              >
                <span class="toggle-switch"></span>
              </button>
            </label>
            <label class="noise-control-item">
              <span class="control-label">倒计时结束自动关闭</span>
              <button 
                class="noise-auto-close-toggle" 
                :class="{ active: autoCloseNoise }"
                @click="toggleAutoCloseNoise"
              >
                <span class="toggle-switch"></span>
              </button>
            </label>
          </div>
        </div>
        <div class="noise-grid">
          <div 
            v-for="noise in whiteNoises" 
            :key="noise.name" 
            class="noise-card"
            :class="{ active: noise.enabled && masterNoiseEnabled, disabled: !masterNoiseEnabled }"
            @click="handleNoiseCardClick(noise.name)"
          >
            <div class="noise-icon" v-html="getNoiseIcon(noise.name)"></div>
            <div class="noise-label">{{ noise.label }}</div>
            <div class="noise-volume" v-if="noise.enabled && masterNoiseEnabled">
              <input 
                type="range" 
                min="0" 
                max="100" 
                v-model="noise.volume"
                @input="setNoiseVolume(noise.name, $event.target.value)"
                @click.stop
                class="volume-slider"
              />
              <span class="volume-text">{{ noise.volume }}%</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  
  <!-- 页面内通知 -->
  <div v-if="inPageNotification.show" class="in-page-notification" :class="inPageNotification.type">
    <div class="notification-content">
      <div class="notification-icon">
        <svg v-if="inPageNotification.type === 'success'" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
          <path d="M9 12l2 2 4-4"></path>
          <circle cx="12" cy="12" r="10"></circle>
        </svg>
        <svg v-else-if="inPageNotification.type === 'info'" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
          <circle cx="12" cy="12" r="10"></circle>
          <line x1="12" y1="16" x2="12" y2="12"></line>
          <line x1="12" y1="8" x2="12.01" y2="8"></line>
        </svg>
        <svg v-else-if="inPageNotification.type === 'warning'" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
          <path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z"></path>
          <line x1="12" y1="9" x2="12" y2="13"></line>
          <line x1="12" y1="17" x2="12.01" y2="17"></line>
        </svg>
        <svg v-else width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
          <circle cx="12" cy="12" r="10"></circle>
          <line x1="15" y1="9" x2="9" y2="15"></line>
          <line x1="9" y1="9" x2="15" y2="15"></line>
        </svg>
      </div>
      <div class="notification-text">
        <div class="notification-title">{{ inPageNotification.title }}</div>
        <div class="notification-body">{{ inPageNotification.body }}</div>
      </div>
      <button class="notification-close" @click="inPageNotification.show = false">
        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
          <line x1="18" y1="6" x2="6" y2="18"></line>
          <line x1="6" y1="6" x2="18" y2="18"></line>
        </svg>
      </button>
    </div>
  </div>
  
  <!-- 任务切换确认对话框 -->
  <div v-if="showConfirmDialog" class="confirm-dialog-overlay" @click="cancelTaskSwitch">
    <div class="confirm-dialog" @click.stop>
      <div class="dialog-header">
        <h3 class="dialog-title">切换任务确认</h3>
      </div>
      <div class="dialog-content">
        <p class="dialog-message">
          当前正在进行任务
          <span class="task-name current">「{{ confirmDialogData.currentTaskTitle }}」</span>
        </p>
        <p class="dialog-message">
          是否切换到新任务
          <span class="task-name new">「{{ confirmDialogData.newTaskTitle }}」</span>？
        </p>
      </div>
      <div class="dialog-actions">
        <button class="dialog-btn cancel" @click="cancelTaskSwitch">
          取消
        </button>
        <button class="dialog-btn confirm" @click="confirmTaskSwitch">
          确认切换
        </button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, onUnmounted, inject } from 'vue'
import storageAPI from '@/api/storage'

// 注入todoStore
const todoStore = inject('todoStore', null)

// 番茄钟状态
const timerMode = ref('freeform') // 'task' | 'freeform'
const timerSize = ref('minimized') // 'minimized' | 'normal' | 'maximized'
const selectedPreset = ref(25)
const currentTime = ref(25 * 60) // 秒
const initialTime = ref(25 * 60)
const isRunning = ref(false)
const timerInterval = ref(null)
const currentTask = ref(null) // 当前关联的任务
const isMinimized = ref(false)
const isMaximized = ref(false)

// 确认对话框状态
const showConfirmDialog = ref(false)
const pendingTask = ref(null)
const confirmDialogData = ref({
  currentTaskTitle: '',
  newTaskTitle: ''
})

// 调试模式状态
const debugMode = ref(false)
const debugTime = ref(5) // 调试模式下的秒数

// 页面内通知状态
const inPageNotification = ref({
  show: false,
  title: '',
  body: '',
  type: 'success' // success, info, warning, error
})

// 白噪音状态
const whiteNoises = ref([
  { name: 'rain', label: '雨声', enabled: false, volume: 50, audio: null, file: '9-relaxing-rain-water-green-noise.mp3' },
  { name: 'cafe', label: '咖啡厅', enabled: false, volume: 30, audio: null, file: 'cafe-noise.mp3' },
  { name: 'city', label: '城市声', enabled: false, volume: 20, audio: null, file: 'city-noise.mp3' },
  { name: 'fire', label: '火焰声', enabled: false, volume: 40, audio: null, file: 'fire-sound.mp3' },
  { name: 'rain_light', label: '轻雨声', enabled: false, volume: 35, audio: null, file: 'rainy-day-in-town-with-birds-singing.mp3' },
  { name: 'sea', label: '海浪声', enabled: false, volume: 45, audio: null, file: 'sea-waves.mp3' },
  { name: 'road', label: '交通声', enabled: false, volume: 25, audio: null, file: 'road-transport-noise.mp3' }
])

// 白噪音控制状态
const masterNoiseEnabled = ref(true) // 总开关
const autoCloseNoise = ref(true) // 倒计时结束自动关闭
const userNoiseSelections = ref([]) // 用户选择的白噪音

const presetTimes = [
  { label: '25分钟', value: 25 },
  { label: '50分钟', value: 50 },
  { label: '75分钟', value: 75 },
  { label: '100分钟', value: 100 }
]

// 计算属性
const formattedTime = computed(() => {
  const minutes = Math.floor(currentTime.value / 60)
  const seconds = currentTime.value % 60
  return `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`
})

const progressPercentage = computed(() => {
  if (initialTime.value === 0) return 0
  return ((initialTime.value - currentTime.value) / initialTime.value) * 100
})

const timerSizeClass = computed(() => {
  return {
    'timer-minimized-state': timerSize.value === 'minimized',
    'timer-normal-state': timerSize.value === 'normal',
    'timer-maximized-state': timerSize.value === 'maximized'
  }
})

const timerModeClass = computed(() => {
  return {
    'task-mode': timerMode.value === 'task',
    'freeform-mode': timerMode.value === 'freeform'
  }
})

// 方法
const setTimerMode = (mode) => {
  // 只有在模式真正改变时才停止计时器
  if (timerMode.value !== mode) {
    stopTimer()
    timerMode.value = mode
    
    // 如果切换到自由计时模式，清空当前任务
    if (mode === 'freeform') {
      currentTask.value = null
    }
    
    // 重置为默认预设时间
    setPresetTime(selectedPreset.value)
  }
}

const setTimerSize = (size) => {
  timerSize.value = size
  isMinimized.value = size === 'minimized'
  isMaximized.value = size === 'maximized'
}

const toggleMinimize = () => {
  if (isMinimized.value) {
    setTimerSize('normal')
  } else {
    setTimerSize('minimized')
  }
}

const toggleMaximize = () => {
  if (isMaximized.value) {
    setTimerSize('normal')
  } else {
    setTimerSize('maximized')
  }
}

const setPresetTime = (minutes) => {
  if (debugMode.value) return // 调试模式下不允许设置预设时间
  
  selectedPreset.value = minutes
  const seconds = minutes * 60
  currentTime.value = seconds
  initialTime.value = seconds
  stopTimer()
}

// 调试模式相关方法
const onDebugModeChange = () => {
  if (debugMode.value) {
    // 进入调试模式
    stopTimer()
    updateDebugTime()
  } else {
    // 退出调试模式，恢复正常预设时间
    setPresetTime(selectedPreset.value)
  }
}

const updateDebugTime = () => {
  if (debugMode.value) {
    currentTime.value = debugTime.value
    initialTime.value = debugTime.value
    stopTimer()
  }
}

const toggleTimer = () => {
  if (isRunning.value) {
    stopTimer()
  } else {
    startTimer()
  }
}

const startTimer = () => {
  if (currentTime.value <= 0) return
  
  isRunning.value = true
  timerInterval.value = setInterval(() => {
    currentTime.value--
    
    if (currentTime.value <= 0) {
      stopTimer()
      onTimerComplete()
    }
  }, 1000)
}

const stopTimer = () => {
  isRunning.value = false
  if (timerInterval.value) {
    clearInterval(timerInterval.value)
    timerInterval.value = null
  }
}

const onTimerComplete = async () => {
  // Timer completed
  
  // 如果开启了自动关闭白噪音，则关闭所有白噪音
  if (autoCloseNoise.value) {
    stopAllNoise()
  }
  
  let taskCompleted = false
  let taskName = ''
  
  // 如果是任务模式，更新任务的番茄钟计数并检查是否完成任务
  if (timerMode.value === 'task' && currentTask.value && todoStore) {
    taskName = currentTask.value.title
    
    // 更新任务的番茄钟计数
    todoStore.completePomodoroForTask(currentTask.value.id)
    
    // 获取更新后的任务状态
    const updatedTask = todoStore.state.tasks.find(task => task.id === currentTask.value.id)
    
    // 检查任务是否已完成所需的番茄钟数
    if (updatedTask) {
      console.log(`任务 "${updatedTask.title}" 番茄钟进度: ${updatedTask.pomodoroCount}/${updatedTask.pomodoroRequired}`)
      
      // 如果完成了所需的番茄钟数，任务应该已经被标记为完成
      if (updatedTask.completed || updatedTask.pomodoroCount >= updatedTask.pomodoroRequired) {
        taskCompleted = true
        console.log(`任务 "${updatedTask.title}" 已完成！`)
        
        // 如果任务完成，切换到自由模式
        currentTask.value = null
        timerMode.value = 'freeform'
      }
    }
  }
  
  // 显示完成通知
  showCompletionNotification(taskCompleted, taskName)
  
  // 播放完成提示音
  await playCompletionSound()
}

// 检测操作系统
const detectOS = () => {
  const userAgent = navigator.userAgent.toLowerCase()
  if (userAgent.includes('mac')) return 'macOS'
  if (userAgent.includes('win')) return 'Windows'
  if (userAgent.includes('linux')) return 'Linux'
  return 'Unknown'
}

// 检查通知权限并请求
const requestNotificationPermission = async () => {
  if (!('Notification' in window)) {
    console.log('此浏览器不支持桌面通知')
    return false
  }
  
  if (Notification.permission === 'granted') {
    return true
  }
  
  if (Notification.permission !== 'denied') {
    const permission = await Notification.requestPermission()
    return permission === 'granted'
  }
  
  return false
}

// 显示完成通知
const showCompletionNotification = async (taskCompleted = false, taskName = '') => {
  const os = detectOS()
  const hasPermission = await requestNotificationPermission()
  
  let title = '🍅 番茄钟完成！'
  let body = `专注时间结束${debugMode.value ? ' (调试模式)' : ''}`
  
  if (taskCompleted && taskName) {
    title = '🎉 任务完成！'
    body = `任务「${taskName}」已完成${debugMode.value ? ' (调试模式)' : ''}`
  }
  
  // 控制台日志（调试用）
  console.log(`[${os}] ${title} - ${body}`)
  
  // 系统通知
  if (hasPermission) {
    try {
      const notification = new Notification(title, {
        body: body,
        icon: '/favicon.ico',
        badge: '/favicon.ico',
        tag: 'pomodoro-timer',
        requireInteraction: true,
        silent: false
      })
      
      // 自动关闭通知
      setTimeout(() => {
        notification.close()
      }, 5000)
      
      console.log('系统通知已发送')
    } catch (error) {
      console.error('发送系统通知失败:', error)
      // 显示页面内通知而不是alert
      showInPageNotification(title, body)
    }
  } else {
    console.log('通知权限未授予，显示页面内通知')
    // 显示页面内通知而不是alert
    showInPageNotification(title, body)
  }
}

// 显示页面内通知
const showInPageNotification = (title, body, type = 'success') => {
  inPageNotification.value = {
    show: true,
    title,
    body,
    type
  }
  
  // 3秒后自动隐藏
  setTimeout(() => {
    inPageNotification.value.show = false
  }, 3000)
}

// 播放完成提示音
const playCompletionSound = async () => {
  try {
    // 从设置中获取选择的提示音
    const settingsStr = await storageAPI.getItem('pomodoroSettings')
    const settings = JSON.parse(settingsStr || '{}')
    const soundFile = settings.completionSound || 'bell.mp3'
    
    // 使用Electron API获取正确的资源路径
    const audioPath = window.electronAPI ? 
      await window.electronAPI.getResourcePath(`bell/${soundFile}`) : 
      `/bell/${soundFile}`
    
    // 播放选择的提示音
    const audio = new Audio(audioPath)
    audio.volume = 0.5
    audio.play().catch(async error => {
      console.error('播放提示音失败:', error)
      // 如果播放失败，尝试播放默认音效
      const fallbackPath = window.electronAPI ? 
        await window.electronAPI.getResourcePath('bell/bell.mp3') : 
        '/bell/bell.mp3'
      const fallbackAudio = new Audio(fallbackPath)
      fallbackAudio.volume = 0.5
      fallbackAudio.play().catch(console.error)
    })
  } catch (error) {
    console.error('播放声音失败:', error)
  }
}

const resetTimer = () => {
  stopTimer()
  currentTime.value = initialTime.value
}

// 任务相关方法

const stopCurrentTask = () => {
  stopTimer()
  currentTask.value = null
  timerMode.value = 'freeform'
}

// 白噪音控制
const initializeAudio = async () => {
  for (const noise of whiteNoises.value) {
    if (!noise.audio) {
      // 使用Electron API获取正确的资源路径
      const audioPath = window.electronAPI ? 
        await window.electronAPI.getResourcePath(`noise/${noise.file}`) : 
        `/noise/${noise.file}`
      noise.audio = new Audio(audioPath)
      noise.audio.loop = true
      noise.audio.volume = noise.volume / 100
    }
  }
}

const toggleNoise = async (noiseName) => {
  const noise = whiteNoises.value.find(n => n.name === noiseName)
  if (noise) {
    noise.enabled = !noise.enabled
    
    if (noise.enabled) {
      if (!noise.audio) {
        // 使用Electron API获取正确的资源路径
        const audioPath = window.electronAPI ? 
          await window.electronAPI.getResourcePath(`noise/${noise.file}`) : 
          `/noise/${noise.file}`
        noise.audio = new Audio(audioPath)
        noise.audio.loop = true
        noise.audio.volume = noise.volume / 100
      }
      noise.audio.play().catch(e => console.log('Audio play failed:', e))
    } else {
      if (noise.audio) {
        noise.audio.pause()
        noise.audio.currentTime = 0
      }
    }
  }
}

const stopAllNoise = () => {
  whiteNoises.value.forEach(noise => {
    noise.enabled = false
    if (noise.audio) {
      noise.audio.pause()
      noise.audio.currentTime = 0
    }
  })
}

const setNoiseVolume = (noiseName, volume) => {
  const noise = whiteNoises.value.find(n => n.name === noiseName)
  if (noise) {
    const volumeValue = parseInt(volume)
    noise.volume = volumeValue
    if (noise.audio) {
      noise.audio.volume = volumeValue / 100
    }
  }
}

// 白噪音图标映射
const getNoiseIcon = (noiseName) => {
  const iconMap = {
    rain: `<svg width="35" height="35" viewBox="0 0 24 24" fill="none">
      <path d="M4 15s1-1 4-1 5 2 8 2 4-1 4-1V3s-1 1-4 1-5-2-8-2-4 1-4 1z" stroke="currentColor" stroke-width="2" fill="none"/>
      <path d="M10 20v2M14 20v2M18 20v2M6 20v2" stroke="currentColor" stroke-width="2"/>
    </svg>`,
    cafe: `<svg width="35" height="35" viewBox="0 0 24 24" fill="none">
      <path d="M17 8h1a4 4 0 1 1 0 8h-1" stroke="currentColor" stroke-width="2" fill="none"/>
      <path d="M3 8h14v9a4 4 0 0 1-4 4H7a4 4 0 0 1-4-4V8z" stroke="currentColor" stroke-width="2" fill="none"/>
      <line x1="6" y1="2" x2="6" y2="4" stroke="currentColor" stroke-width="2"/>
      <line x1="10" y1="2" x2="10" y2="4" stroke="currentColor" stroke-width="2"/>
      <line x1="14" y1="2" x2="14" y2="4" stroke="currentColor" stroke-width="2"/>
    </svg>`,
    city: `<svg width="35" height="35" viewBox="0 0 24 24" fill="none">
      <path d="M3 21h18M5 21V7l6-4v18M13 21V9h8v12M9 9v.01M9 12v.01M9 15v.01M17 12v.01M17 15v.01M17 18v.01" stroke="currentColor" stroke-width="2" fill="none"/>
    </svg>`,
    fire: `<svg width="35" height="35" viewBox="0 0 24 24" fill="none">
      <path d="M8.5 14.5A2.5 2.5 0 0 0 11 12c0-1.38-.5-2-1-3-1.072-2.143-.224-4.054 2-6 .5 2.5 2 4.9 4 6.5 2 1.6 3 3.5 3 5.5a7 7 0 1 1-14 0c0-1.153.433-2.294 1-3a2.5 2.5 0 0 0 2.5 2.5z" stroke="currentColor" stroke-width="2" fill="none"/>
    </svg>`,
    rain_light: `<svg width="35" height="35" viewBox="0 0 24 24" fill="none">
      <path d="M4 15s1-1 4-1 5 2 8 2 4-1 4-1V3s-1 1-4 1-5-2-8-2-4 1-4 1z" stroke="currentColor" stroke-width="2" fill="none"/>
      <path d="M8 19v2M12 19v2M16 19v2" stroke="currentColor" stroke-width="1.5"/>
    </svg>`,
    sea: `<svg width="35" height="35" viewBox="0 0 24 24" fill="none">
      <path d="M2 12c.6-2.4 1.4-4 2.8-4s2.2 1.6 2.8 4c.6 2.4 1.4 4 2.8 4s2.2-1.6 2.8-4c.6-2.4 1.4-4 2.8-4s2.2 1.6 2.8 4c.6 2.4 1.4 4 2.8 4" stroke="currentColor" stroke-width="2" fill="none"/>
      <path d="M2 16c.6-2.4 1.4-4 2.8-4s2.2 1.6 2.8 4c.6 2.4 1.4 4 2.8 4s2.2-1.6 2.8-4c.6-2.4 1.4-4 2.8-4s2.2 1.6 2.8 4c.6 2.4 1.4 4 2.8 4" stroke="currentColor" stroke-width="2" fill="none"/>
    </svg>`,
    road: `<svg width="35" height="35" viewBox="0 0 24 24" fill="none">
      <path d="M7 17h10l4-7H3l4 7z" stroke="currentColor" stroke-width="2" fill="none"/>
      <circle cx="7" cy="19" r="2" stroke="currentColor" stroke-width="2" fill="none"/>
      <circle cx="17" cy="19" r="2" stroke="currentColor" stroke-width="2" fill="none"/>
      <path d="M5 17H3a2 2 0 0 1-2-2v-4m18 6h2a2 2 0 0 0 2-2v-4" stroke="currentColor" stroke-width="2" fill="none"/>
    </svg>`
  }
  return iconMap[noiseName] || `<svg width="35" height="35" viewBox="0 0 24 24" fill="none">
    <polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5" stroke="currentColor" stroke-width="2" fill="none"/>
    <path d="M19.07 4.93a10 10 0 0 1 0 14.14M15.54 8.46a5 5 0 0 1 0 7.07" stroke="currentColor" stroke-width="2" fill="none"/>
  </svg>`
}

// 总开关控制
const toggleMasterNoise = async () => {
  masterNoiseEnabled.value = !masterNoiseEnabled.value
  
  if (!masterNoiseEnabled.value) {
    // 关闭总开关时，保存当前用户选择并停止所有声音
    userNoiseSelections.value = whiteNoises.value
      .filter(noise => noise.enabled)
      .map(noise => ({ name: noise.name, volume: noise.volume }))
    stopAllNoise()
  } else {
    // 开启总开关时，恢复用户之前的选择
    for (const selection of userNoiseSelections.value) {
      const noise = whiteNoises.value.find(n => n.name === selection.name)
      if (noise) {
        noise.enabled = true
        noise.volume = selection.volume
        if (!noise.audio) {
          // 使用Electron API获取正确的资源路径
          const audioPath = window.electronAPI ? 
            await window.electronAPI.getResourcePath(`noise/${noise.file}`) : 
            `/noise/${noise.file}`
          noise.audio = new Audio(audioPath)
          noise.audio.loop = true
          noise.audio.volume = noise.volume / 100
        }
        noise.audio.play().catch(e => console.log('Audio play failed:', e))
      }
    }
  }
}

// 自动关闭开关控制
const toggleAutoCloseNoise = () => {
  autoCloseNoise.value = !autoCloseNoise.value
}

// 处理白噪音卡片点击
const handleNoiseCardClick = (noiseName) => {
  if (!masterNoiseEnabled.value) return
  toggleNoise(noiseName)
}

// 键盘快捷键
const handleKeyPress = (event) => {
  if (event.code === 'Space' && event.target.tagName !== 'INPUT') {
    event.preventDefault()
    toggleTimer()
  }
  
  // ESC键最小化
  if (event.code === 'Escape' && timerSize.value !== 'minimized') {
    setTimerSize('minimized')
  }
}

// 任务启动方法
const startTaskTimer = (task) => {
  // 如果有任务正在运行中，需要确认
  if (isRunning.value) {
    pendingTask.value = task
    confirmDialogData.value = {
      currentTaskTitle: currentTask.value ? currentTask.value.title : '当前任务',
      newTaskTitle: task.title
    }
    showConfirmDialog.value = true
    return
  }
  
  // 直接启动任务
  executeTaskSwitch(task)
}

// 执行任务切换
const executeTaskSwitch = (task) => {
  // 停止当前计时器
  stopTimer()
  
  currentTask.value = task
  timerMode.value = 'task'
  timerSize.value = 'normal'
  
  // 设置任务的番茄钟时间
  // 根据任务所需的番茄钟数量计算总时间
  console.log('task', task)
  console.log('task.pomodoroRequired', task.pomodoroRequired)
  const totalMinutes = (task.pomodoroRequired || 1) * 25; // 每个番茄钟25分钟
  selectedPreset.value = totalMinutes;
  setPresetTime(totalMinutes);
  
  console.log(`任务 "${task.title}" 需要 ${task.pomodoroRequired || 1} 个番茄钟，总计 ${totalMinutes} 分钟`);
  
  // 自动开始计时
  startTimer()
}

// 确认切换任务
const confirmTaskSwitch = () => {
  if (pendingTask.value) {
    executeTaskSwitch(pendingTask.value)
  }
  closeConfirmDialog()
}

// 取消切换任务
const cancelTaskSwitch = () => {
  closeConfirmDialog()
}

// 关闭确认对话框
const closeConfirmDialog = () => {
  showConfirmDialog.value = false
  pendingTask.value = null
  confirmDialogData.value = {
    currentTaskTitle: '',
    newTaskTitle: ''
  }
}

// 暴露方法给父组件
defineExpose({
  startTaskTimer,
  stopCurrentTask,
  setTimerSize
})

onMounted(() => {
  document.addEventListener('keydown', handleKeyPress)
  initializeAudio()
})

onUnmounted(() => {
  stopTimer()
  document.removeEventListener('keydown', handleKeyPress)
})
</script>

<style lang="less" scoped>
.pomodoro-timer {
  position: fixed;
  bottom: 20px;
  left: 20px;
  border-radius: 20px;
  color: white;
  z-index: 100;
  
  &.timer-minimized-state {
    padding: 12px 16px;
    left: 50%;
    min-width: 180px;
  }
  
  &.timer-normal-state {
    padding: 24px;
    left: 45%;
    min-width: 320px;
  }
  
  &.timer-maximized-state {
    padding: 32px;
    min-width: 600px;
    max-width: 800px;
    top: 35%;
    left: 50%;
    right: auto;
    transform: translate(-50%, -50%);
  }
}

/* 计时器容器 */
.timer-container {
  padding: 16px 20px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
}

/* 计时器头部 */
.timer-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.timer-status {
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.timer-icon {
  font-size: 16px;
  color: rgba(255,255,255,0.9);
}

.timer-label {
  font-size: 14px;
  font-weight: 600;
  color: rgba(255,255,255,0.9);
  overflow: hidden;
  text-overflow: ellipsis;
}

.timer-mode-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}

.timer-mode {
  background: rgba(255,255,255,0.15);
  padding: 4px 12px;
  border-radius: 12px;
  backdrop-filter: blur(10px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.mode-indicator {
  font-size: 12px;
  font-weight: 500;
  color: rgba(255,255,255,0.95);
}

/* 头部控制按钮 */
.timer-header-controls {
  display: flex;
  gap: 4px;
}

.timer-minimize-btn,
.timer-maximize-btn {
  width: 24px;
  height: 24px;
  border: none;
  background: rgba(255,255,255,0.15);
  color: rgba(255,255,255,0.8);
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  backdrop-filter: blur(5px);
  
  &:hover {
    background: rgba(255,255,255,0.25);
    color: rgba(255,255,255,1);
    transform: scale(1.05);
  }
  
  i {
    font-size: 10px;
  }
}

/* 时长选择器 */
.timer-duration-selector {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
  padding: 8px;
  background: rgba(255,255,255,0.1);
  border-radius: 12px;
  backdrop-filter: blur(5px);
}

.duration-btn {
  flex: 1;
  padding: 8px 12px;
  border: none;
  background: rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.8);
  border-radius: 8px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  backdrop-filter: blur(5px);
  
  &:hover {
    background: rgba(255,255,255,0.2);
    color: rgba(255,255,255,1);
    transform: translateY(-1px);
  }
  
  &.active {
    background: rgba(255,255,255,0.25);
    color: white;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  }
}

/* 计时器显示 */
.timer-display {
  text-align: center;
  margin-bottom: 16px;
}

.timer-time {
  font-size: 48px;
  font-weight: 300;
  font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', monospace;
  color: white;
  text-shadow: 0 2px 4px rgba(0,0,0,0.1);
  display: block;
  margin-bottom: 12px;
}

.timer-controls {
  display: flex;
  justify-content: center;
}

.timer-play-btn {
  width: 56px;
  height: 56px;
  border: none;
  background: rgba(255,255,255,0.2);
  color: white;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  
  &:hover {
    background: rgba(255,255,255,0.3);
    transform: scale(1.05);
    box-shadow: 0 6px 16px rgba(0,0,0,0.15);
  }
  
  &:active {
    transform: scale(0.95);
  }
  
  i {
    font-size: 20px;
  }
}

/* 任务信息区域 */
.task-info-container {
  background: rgba(255,255,255,0.95);
  padding: 16px 20px;
  border-top: 1px solid rgba(0,0,0,0.05);
}

.task-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  
  i {
    font-size: 14px;
    color: #6b7280;
  }
}

.task-label {
  font-size: 12px;
  font-weight: 600;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.task-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.task-name {
  font-size: 14px;
  color: #1f2937;
  font-weight: 500;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.task-controls {
  display: flex;
  gap: 8px;
}

.stop-task-btn {
  padding: 6px 12px;
  border: none;
  background: #fee2e2;
  color: #dc2626;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
  transition: all 0.2s ease;
  
  &:hover {
    background: #fecaca;
    transform: translateY(-1px);
  }
  
  i {
    font-size: 10px;
  }
}



// 最小化状态样式
.timer-minimized {
  background: var(--surface-color, rgba(255, 255, 255, 0.95));
  border-radius: 12px;
  padding: 12px 16px;
  box-shadow: 0 4px 12px var(--shadow-color, rgba(0, 0, 0, 0.15));
  backdrop-filter: blur(10px);
  cursor: pointer;
  transition: all 0.2s ease;
  border: 1px solid var(--border-color, rgba(255, 255, 255, 0.2));
  
  .mini-timer-content {
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: space-between;
    
    .mini-icon {
      color: var(--text-secondary, #6b7280);
    }
    
    .mini-time {
      font-size: 14px;
      font-weight: 600;
      color: var(--text-primary, #1f2937);
      font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', monospace;
    }
    
    .mini-play-btn {
      width: 24px;
      height: 24px;
      border: none;
      background: var(--button-secondary-bg, #f3f4f6);
      border-radius: 50%;
      color: var(--text-secondary, #6b7280);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.2s ease;
      
      &:hover {
        background: var(--button-secondary-hover, #e5e7eb);
        color: var(--text-primary, #374151);
      }
    }
  }
  
  .mini-task-info {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--border-color, #e5e7eb);
    display: flex;
    align-items: center;
    justify-content: space-between;
    
    .task-title {
      font-size: 12px;
      color: var(--text-secondary, #6b7280);
      max-width: 120px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    
    .stop-task-btn {
      padding: 2px 6px;
      border: none;
      background: #fee2e2;
      color: #dc2626;
      border-radius: 4px;
      font-size: 10px;
      cursor: pointer;
      transition: all 0.2s ease;
      
      &:hover {
        background: #fecaca;
      }
    }
  }
}

// 正常和最大化状态容器
.timer-container {
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
  backdrop-filter: blur(10px);
  color: var(--text-primary, #ffffff);
  transition: all 0.3s ease;
  
  // 任务模式 - 使用CSS变量
  &.task-mode {
    background: var(--pomodoro-task-bg);
    min-width: 320px;
  }
  
  // 自由模式 - 使用CSS变量
  &.freeform-mode {
    background: var(--pomodoro-free-bg);
    min-width: 280px;
  }
  
  // 最大化状态
  .timer-maximized-state & {
    min-width: 600px;
    max-width: 800px;
    padding: 24px;
  }
}

// 控制按钮区域
.timer-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  
  .control-left,
  .control-right {
    width: 32px;
    display: flex;
    justify-content: center;
  }
  
  .timer-title {
    display: flex;
    color: var(--title-color);
    align-items: center;
    gap: 8px;
    font-size: 16px;
    font-weight: 600;
    
    svg {
      opacity: 0.9;
    }
  }
  
  .control-btn {
    width: 28px;
    height: 28px;
    border: none;
    background: var(--button-secondary-bg, rgba(255, 255, 255, 0.1));
    border-radius: 6px;
    color: var(--text-secondary, rgba(255, 255, 255, 0.8));
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    
    &:hover {
      background: var(--button-secondary-hover, rgba(255, 255, 255, 0.2));
      color: var(--text-primary, #ffffff);
    }
  }
}

// 模式显示
.mode-display {
  display: flex;
  justify-content: center;
  margin-bottom: 16px;
}

.mode-label {
  padding: 8px 16px;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.9);
  font-size: 14px;
  font-weight: 600;
  backdrop-filter: blur(5px);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

// 预设时间按钮
.preset-buttons {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-bottom: 20px;
}

.preset-btn {
  padding: 8px 12px;
  border: 1px solid var(--border-color, rgba(255, 255, 255, 0.3));
  background: var(--button-secondary-bg, rgba(255, 255, 255, 0.1));
  color: var(--text-primary, #ffffff);
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  
  &:hover {
    background: var(--button-secondary-hover, rgba(255, 255, 255, 0.2));
    border-color: var(--border-color, rgba(255, 255, 255, 0.5));
  }
  
  &.active {
    background: var(--primary-color, #ffffff);
    color: var(--background-color, #1f2937);
    border:1px solid var(--border-color, #ffffff);
    font-weight: 600;
  }
}

// 计时器显示
.timer-display {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.time-text {
  font-size: 36px;
  color: var(--title-color);
  font-weight: 700;
  letter-spacing: -0.02em;
  
  .timer-maximized-state & {
    font-size: 48px;
  }
}

.play-btn {
  width: 48px;
  height: 48px;
  border: none;
  background: var(--button-secondary-bg, rgba(255, 255, 255, 0.2));
  border-radius: 50%;
  color: var(--text-primary, #ffffff);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  backdrop-filter: blur(10px);
  
  &:hover {
    background: var(--button-secondary-hover, rgba(255, 255, 255, 0.3));
    transform: scale(1.05);
  }
  
  &:active {
    transform: scale(0.95);
  }
  
  &.playing {
    background: var(--primary-color, rgba(255, 255, 255, 0.9));
    color: var(--background-color, #1f2937);
  }
  
  .timer-maximized-state & {
    width: 56px;
    height: 56px;
    
    svg {
      width: 28px;
      height: 28px;
    }
  }
}

// 当前任务信息
.current-task {
  background: var(--button-secondary-bg, rgba(255, 255, 255, 0.1));
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 16px;
  
  .task-header {
    margin-bottom: 8px;
    
    .task-label {
      font-size: 12px;
      color: var(--text-secondary, rgba(255, 255, 255, 0.8));
      font-weight: 500;
    }
  }
  
  .task-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    
    .task-title {
      font-size: 14px;
      color: var(--text-primary, #ffffff);
      font-weight: 500;
      flex: 1;
      margin-right: 12px;
    }
    
    .stop-task-btn {
      display: flex;
      align-items: center;
      gap: 4px;
      padding: 6px 10px;
      border: none;
      background: rgba(239, 68, 68, 0.2);
      color: var(--text-primary, #ffffff);
      border-radius: 6px;
      font-size: 12px;
      cursor: pointer;
      transition: all 0.2s ease;
      
      &:hover {
        background: rgba(239, 68, 68, 0.3);
      }
    }
  }
}

// 进度条
.progress-bar {
  height: 7px;
  background: var(--button-secondary-bg, rgba(255, 255, 255, 0.2));
  border: 1px solid var(--button-secondary-bg);
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: 16px;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--primary-color, #ffffff), var(--primary-hover, rgba(255, 255, 255, 0.8)));
  border-radius: 2px;
  transition: width 0.3s ease;
}

// 白噪音控制区域
.white-noise-section {
  // border-top: 1px solid var(--border-color, rgba(255, 255, 255, 0.2));
  // padding-top: 10px;
  
  .noise-header {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 16px;
    
    .section-title {
      font-size: 14px;
      font-weight: 600;
      color: var(--title-color, #ffffff);
      margin: 0;
    }
  }
  
  .noise-global-controls {
    display: flex;
    gap: 16px;
    justify-content: space-between;
  }
  
  .noise-control-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    justify-content: space-between;
    background: rgba(255,255,255,0.1);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    flex: 1;
    
    &:hover {
      background: rgba(255,255,255,0.15);
    }
    
    .control-label {
      font-size: 14px;
      color: var(--title-color, rgba(255, 255, 255, 0.8));
      font-weight: 500;
      white-space: nowrap;
    }
  }
  
  .noise-master-toggle,
  .noise-auto-close-toggle {
    width: 28px;
    height: 16px;
    border: none;
    background: rgba(255,255,255,0.2);
    border-radius: 8px;
    cursor: pointer;
    position: relative;
    transition: all 0.2s ease;
    flex-shrink: 0;
    
    .toggle-switch {
      position: absolute;
      top: 2px;
      left: 2px;
      width: 12px;
      height: 12px;
      background: white;
      border-radius: 50%;
      transition: all 0.2s ease;
      box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    }
    
    &.active {
      background: var(--primary-color, rgba(255, 255, 255, 0.3));
      
      .toggle-switch {
        transform: translateX(12px);
      }
    }
  }
  
  .noise-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
    max-width: 100%;
  }
  
  .noise-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 16px 12px;
    background: rgba(255,255,255,0.1);
    color: var(--title-color, #ffffff);
    border: 2px solid transparent;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    min-height: 120px;
    
    &:hover {
      background: rgba(255,255,255,0.15);
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    }
    
    &.active {
      background: var(--primary-color, rgba(255, 255, 255, 0.2));
      border-color: var(--primary-color, rgba(255, 255, 255, 0.5));
      
      .noise-icon i {
        color: var(--text-primary, #ffffff);
      }
      
      .noise-label {
        color: var(--title-color, #ffffff);
      }
    }
    
    &.disabled {
      opacity: 0.5;
      cursor: not-allowed;
      
      &:hover {
        transform: none;
        box-shadow: none;
      }
    }
  }
  
  .noise-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 8px;
    
    i {
      font-size: 24px;
      color: var(--text-secondary, rgba(255, 255, 255, 0.7));
      transition: all 0.2s ease;
    }
  }
  
  .noise-label {
    font-size: 14px;
    color: var(--title-color, rgba(255, 255, 255, 0.9));
    text-align: center;
    margin-bottom: 8px;
  }
  
  .noise-volume {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    
    .volume-slider {
      height: 4px;
      background: rgba(255,255,255,0.2);
      border-radius: 2px;
      outline: none;
      cursor: pointer;
      
      &::-webkit-slider-thumb {
        appearance: none;
        width: 12px;
        height: 12px;
        border-radius: 50%;
        background: var(--primary-color, #ffffff);
        cursor: pointer;
        box-shadow: 0 1px 3px rgba(0,0,0,0.2);
      }
      
      &::-moz-range-thumb {
        width: 12px;
        height: 12px;
        border-radius: 50%;
        background: var(--primary-color, #ffffff);
        cursor: pointer;
        border: none;
        box-shadow: 0 1px 3px rgba(0,0,0,0.2);
      }
    }
    
    .volume-text {
      font-size: 12px;
      color: var(--title-color, rgba(255, 255, 255, 0.7));
      font-weight: 500;
    }
  }
}

// 开关按钮
.noise-toggle {
  position: relative;
  width: 36px;
  height: 20px;
  border: none;
  background: var(--button-secondary-bg, rgba(255, 255, 255, 0.2));
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s ease;
  
  .toggle-switch {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    background: var(--background-color, #ffffff);
    border-radius: 50%;
    transition: all 0.2s ease;
  }
  
  &.active {
    background: var(--primary-color, rgba(255, 255, 255, 0.3));
    
    .toggle-switch {
      transform: translateX(16px);
    }
  }
}

// 音量滑块
.volume-slider {
  width: 80px;
  height: 4px;
  border-radius: 2px;
  background: var(--button-secondary-bg, rgba(255, 255, 255, 0.2));
  outline: none;
  cursor: pointer;
  
  &::-webkit-slider-thumb {
    appearance: none;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--primary-color, #ffffff);
    cursor: pointer;
  }
  
  &::-moz-range-thumb {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--primary-color, #ffffff);
    cursor: pointer;
    border: none;
  }
  
  &:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }
}

// 响应式设计
@media (max-width: 768px) {
  .pomodoro-timer {
    &.timer-minimized-state {
      bottom: 16px;
      left: 16px;
    }
    
    &.timer-normal-state {
      bottom: 16px;
      right: 16px;
    }
    
    &.timer-maximized-state {
      top: 20px;
      left: 20px;
      right: 20px;
      transform: none;
    }
  }
  
  .timer-container {
    min-width: 240px;
    padding: 16px;
    
    &.task-mode,
    &.freeform-mode {
      min-width: 260px;
    }
    
    .timer-maximized-state & {
      min-width: auto;
      max-width: none;
      padding: 20px;
    }
  }
  
  .time-text {
    font-size: 28px;
    
    .timer-maximized-state & {
      font-size: 36px;
    }
  }
  
  .play-btn {
    width: 40px;
    height: 40px;
    
    .timer-maximized-state & {
      width: 48px;
      height: 48px;
      
      svg {
        width: 24px;
        height: 24px;
      }
    }
  }
}

/* 调试模式样式 */
.debug-controls {
  background: linear-gradient(135deg, #fff3cd, #ffeaa7);
  border: 2px solid #f39c12;
  border-radius: 12px;
  padding: 16px;
  margin: 16px 0;
  box-shadow: 0 4px 12px rgba(243, 156, 18, 0.2);
  
  .debug-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    
    .debug-checkbox {
      width: 18px;
      height: 18px;
      accent-color: #f39c12;
    }
    
    .debug-label {
      font-weight: 600;
      color: #d68910;
      font-size: 14px;
    }
    
    .debug-countdown {
      margin-left: auto;
      background: #f39c12;
      color: white;
      padding: 4px 8px;
      border-radius: 6px;
      font-size: 12px;
      font-weight: 600;
    }
  }
  
  .debug-slider-container {
    display: flex;
    align-items: center;
    gap: 12px;
    
    .debug-slider-label {
      font-size: 13px;
      color: #b7950b;
      font-weight: 500;
      min-width: 60px;
    }
    
    .debug-slider {
      flex: 1;
      height: 6px;
      border-radius: 3px;
      background: #f8c471;
      outline: none;
      -webkit-appearance: none;
      
      &::-webkit-slider-thumb {
        -webkit-appearance: none;
        width: 18px;
        height: 18px;
        border-radius: 50%;
        background: #f39c12;
        cursor: pointer;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
      }
      
      &::-moz-range-thumb {
        width: 18px;
        height: 18px;
        border-radius: 50%;
        background: #f39c12;
        cursor: pointer;
        border: none;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
      }
    }
    
    .debug-time-display {
      background: #f39c12;
      color: white;
      padding: 4px 8px;
      border-radius: 6px;
      font-size: 12px;
      font-weight: 600;
      min-width: 40px;
      text-align: center;
    }
  }
}

/* 确认对话框样式 */
.confirm-dialog-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  backdrop-filter: blur(4px);
}

.confirm-dialog {
  background: white;
  border-radius: 12px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
  max-width: 400px;
  width: 90%;
  overflow: hidden;
  animation: dialogSlideIn 0.3s ease-out;
}

@keyframes dialogSlideIn {
  from {
    opacity: 0;
    transform: scale(0.9) translateY(-20px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.dialog-header {
  padding: 20px 24px 16px;
  border-bottom: 1px solid #f1f5f9;
}

.dialog-title {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: #1e293b;
}

.dialog-content {
  padding: 20px 24px;
}

.dialog-message {
  margin: 0 0 12px;
  font-size: 14px;
  line-height: 1.5;
  color: #475569;
  
  &:last-child {
    margin-bottom: 0;
  }
}

.task-name {
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 4px;
  
  &.current {
    background: #fef3c7;
    color: #92400e;
  }
  
  &.new {
    background: #dcfce7;
    color: #166534;
  }
}

.dialog-actions {
  padding: 16px 24px 20px;
  display: flex;
  gap: 12px;
  justify-content: flex-end;
}

.dialog-btn {
  padding: 8px 16px;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  min-width: 80px;
  
  &.cancel {
    background: #f8fafc;
    color: #64748b;
    border: 1px solid #e2e8f0;
    
    &:hover {
      background: #f1f5f9;
      color: #475569;
    }
  }
  
  &.confirm {
    background: #3b82f6;
    color: white;
    
    &:hover {
      background: #2563eb;
    }
    
    &:active {
      transform: translateY(1px);
    }
  }
}

/* 页面内通知样式 */
.in-page-notification {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 1000;
  max-width: 400px;
  min-width: 300px;
  border-radius: 8px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
  animation: slideInRight 0.3s ease-out;
}

.in-page-notification.success {
  background: #f0f9ff;
  border: 1px solid #0ea5e9;
  color: #0c4a6e;
}

.in-page-notification.info {
  background: #f8fafc;
  border: 1px solid #64748b;
  color: #334155;
}

.in-page-notification.warning {
  background: #fffbeb;
  border: 1px solid #f59e0b;
  color: #92400e;
}

.in-page-notification.error {
  background: #fef2f2;
  border: 1px solid #ef4444;
  color: #991b1b;
}

.notification-content {
  display: flex;
  align-items: flex-start;
  padding: 16px;
  gap: 12px;
}

.notification-icon {
  flex-shrink: 0;
  margin-top: 2px;
}

.notification-text {
  flex: 1;
  min-width: 0;
}

.notification-title {
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 4px;
  line-height: 1.4;
}

.notification-body {
  font-size: 13px;
  line-height: 1.4;
  opacity: 0.8;
}

.notification-close {
  flex-shrink: 0;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  opacity: 0.6;
  transition: all 0.2s;
}

.notification-close:hover {
  opacity: 1;
  background: rgba(0, 0, 0, 0.05);
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(100%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
</style>